<template>
    <div class="typeDispose">
        <div class="commonSearch">
            <div class="commonContent" style="height: 40px;border:none">
                <el-form :model="searchForm" label-width="80px" size="mini" style="flex:22">
                    <el-form-item label="设备分组">
                        <tree-select @getId="getId" :clearable='false'></tree-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <myDialog ref="myDialog" @updateList='updateList'></myDialog>

        <!-- 表格 -->
        <table-list ref='tableList' :searchForm='searchForm' @handleEvent='handleEvent' style="margin-top:20px"></table-list>
    </div>
</template>

<script>
    import tableList from './tableList.vue'
    import myDialog from './myDialog.vue'
    export default {
        data() {
            return {
                searchForm: {
                    groupId: '',
                    page: 1,
                    limit: 10
                }
            }
        },
        components: {
            tableList,
            myDialog,
        },
        methods: {
            //分组id
            getId(id) {
                this.searchForm.groupId = id
                this.$refs.tableList.getDeviceLampTypeList(this.searchForm)
            },
            updateList() {
                this.$refs.tableList.getDeviceLampTypeList(this.searchForm)
            },
            handleEvent(payload) {
                this.$nextTick(() => {
                    this.$refs.myDialog.open(payload)
                })
            },
        }
    }
</script>

<style lang="less" scoped>
    .typeDispose {
        .commonContent {
            .el-form-item--mini.el-form-item {
                width: 33%;
            }
        }
    }
</style>